<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <!-- 引入normalize -->
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/search.css">
    <link rel="stylesheet" href="../css/index.css">
    <title>首页</title>
</head>

<body>
    <!-- 搜索区域 -->
    <div class="search">
        <input type="text" class="iconfont" placeholder="&#xe651;搜索商品名称">
    </div>
    <!-- 轮播图 -->
    <div class="banner">
        <ul>
            <li class="on">
                <a href=""><img src="../images/banner.jpg" alt="">
                </a>
            </li>
            <li>
                <a href=""><img src="../images/banner.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="../images/banner.jpg" alt=""></a>
            </li>
        </ul>
        <ol>
            <li class="on"></li>
            <li></li>
            <li></li>
        </ol>
    </div>

    <!-- 导航 -->
    <nav class="top-nav">
        <ul>
            <li>
                <div class="img1 img"><img src="../images/nav1.png" alt=""></div>
                <h2>女鞋</h2>
            </li>
            <li>
                <div class="img2 img"><img src="../images/nav2.png" alt=""></div>
                <h2>男鞋</h2>
            </li>
            <li>
                <div class="img3 img"><img src="../images/nav3.png" alt=""></div>
                <h2>真皮包</h2>
            </li>
            <li>
                <div class="img4 img"><img src="../images/nav4.png" alt=""></div>
                <h2>女款包包</h2>
            </li>
            <li>
                <div class="img5 img"><img src="../images/nav5.png" alt=""></div>
                <h2>皮带</h2>
            </li>
            <li>
                <div class="img6 img"><img src="../images/nav6.png" alt=""></div>
                <h2>饰品</h2>
            </li>
            <li>
                <div class="img7 img"><img src="../images/nav7.png" alt=""></div>
                <h2>女裤凉拖</h2>
            </li>
            <li>
                <div class="img8 img"><img src="../images/nav8.png" alt=""></div>
                <h2>男款凉拖</h2>
            </li>
        </ul>
    </nav>

    <div class="content1 content">
        <div class="title1 title">
            <h2 class="h2">精品推荐</h2>
            <span class="span">更多</span>
        </div>
        <ul>
            <li class="space">
                <img src="../images/recommend1.jpg " alt=" ">
                <h3>2019春季新款男鞋</h3>
                <span></span>
            </li>
            <li class="space">
                <img src="../images/recommend2.jpg " alt=" ">
                <h3>春夏鞋店爆款女鞋</h3>
                <!-- 20px -->
                <span></span>
            </li>
            <li class="space">
                <img src="../images/recommend3.jpg " alt=" ">
                <h3>牛皮爆款时尚女包</h3>
                <span></span>
            </li>
            <li class="space">
                <img src="../images/recommend4.jpg " alt=" ">
                <h3>左右春夏爆款</h3>
                <span></span>
            </li>
        </ul>
    </div>

    <!-- 第二个推荐栏 -->
    <div class="content2 content">
        <div class="title2 title">
            <h2 class="h2">特惠清仓</h2>
            <span class="span">更多 </span>
        </div>
        <ul>
            <li class="space"><img src="../images/content2_1.jpg" alt="">
                <h3>左右鞋店春秋爆款断码...</h3>

            </li>
            <li class="space">
                <img src="../images/content2_2.jpg" alt="">
                <h3>左右鞋店春秋爆款断码...</h3>
            </li>
        </ul>
    </div>

    <!-- 第三个栏 -->

    <div class="content3 content">
        <div class="title3 title">
            <h2 class="h2">新品优选</h2>
            <span class="span">更多 </span>
        </div>
        <ul>
            <li class="space"><img src="../images/content3_1.jpg" alt="">
                <h3>左右鞋店春秋爆款断码</h3>

            </li>
            <li class="space">
                <img src="../images/content3_2.jpg" alt="">
                <h3>左右鞋店春秋爆款断码</h3>
            </li>

            <li class="space">
                <img src="../images/content3_3.jpg" alt="">
                <h3>左右鞋店春秋爆款断码</h3>
            </li>
        </ul>
    </div>



    <!-- 第四个栏 -->

    <div class="content3 content">
        <div class="title3 title">
            <h2 class="h2">新品优选</h2>
            <span class="span">更多 </span>
        </div>
        <ul>
            <li class="space"><img src="../images/content4_1.jpg" alt="">
                <h3>左右鞋店春夏爆款福利</h3>

            </li>
            <li class="space">
                <img src="../images/content4_2.jpg" alt="">
                <h3>左右鞋店春夏爆款凉拖</h3>
            </li>

            <li class="space">
                <img src="../images/content4_3.jpg" alt="">
                <h3>左右鞋店春夏爆款凉拖</h3>
            </li>

            <li class="space">
                <img src="../images/content4_4.jpg" alt="">
                <h3>左右鞋店春夏爆款福利</h3>
            </li>
        </ul>
    </div>

</body>

</html>